<template>
  <div class="single-check">
    <div class="question-name">
      <template v-if="seq"> {{ seq }}. </template>
      <span class="q-text"
        >{{ questionData.question }}
        <span class="q-text-score">（分值：{{ questionData.score }}分）</span>
      </span>
      <div class="img-wrap" v-if="questionData.question_file">
        <img
          :src="questionData.question_file"
          style="width: 40px; height: 30px"
        />
      </div>
    </div>
    <div class="question-content single">
      <el-radio-group
        v-model="questionData.fill_content"
        @input="handleInput"
        :disabled="disable"
      >
        <el-radio
          :label="item.option_id + ''"
          v-for="(item, index) in questionData.options"
          :key="index"
        >
          <template v-if="item.option_file">
            {{ item.option_content }}
            <div class="img-wrap">
              <img :src="item.option_file" />
            </div>
          </template>
          <template v-else>
            {{ item.option_content }}
          </template>
        </el-radio>
      </el-radio-group>
    </div>
  </div>
</template>

<script>
export default {
  name: "singleCheck",
  components: {},
  props: ["seq", "questionData", "mode"],
  computed: {
    disable() {
      return (
        this.mode === "detail" ||
        this.mode === "score" ||
        this.mode === "answer"
      );
    },
  },
  data() {
    return {
      radio: "",
    };
  },
  mounted() {
    // console.log('ssssssssssssss');
  },
  methods: {
    handleInput() {
      this.$emit("submitAnswer", {
        question_id: this.questionData.question_id, // 考题id
        fill_content: this.questionData.fill_content, // 填写内容
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.wrapper {
}
</style>